<template>
  <div class="my-courses">
    <!-- 标题 -->
    <div class="page-header">
      <h1 class="page-title">{{ $t('assets.myCourses.title') }}</h1>
    </div>

    <!-- 课程表格 -->
    <div class="courses-table-container">
      <el-table
        :data="paginatedCourses"
        class="courses-table"
        v-loading="loading"
      >
        <!-- 课程名称 -->
        <el-table-column prop="courseName" :label="$t('assets.myCourses.courseName')" min-width="200">
          <template #default="{ row }">
            <span class="course-name">{{ row.courseName }}</span>
          </template>
        </el-table-column>

        <!-- 课程老师 -->
        <el-table-column prop="teacherName" :label="$t('assets.myCourses.teacherName')" min-width="150">
          <template #default="{ row }">
            <span class="teacher-name">{{ row.teacherName }}</span>
          </template>
        </el-table-column>

        <!-- 未完成教学任务 -->
        <el-table-column prop="incompleteTasks" :label="$t('assets.myCourses.incompleteTasks')" min-width="150" align="center">
          <template #default="{ row }">
            <el-popover
              placement="top"
              :width="300"
              trigger="hover"
              v-if="row.incompleteTaskDetails && row.incompleteTaskDetails.length > 0"
            >
              <template #reference>
                <span class="task-count incomplete">{{ row.incompleteTasks }}</span>
              </template>
              <div class="task-details">
                <div class="task-details-title">{{ $t('assets.myCourses.taskDetails') }}</div>
                <div 
                  v-for="task in row.incompleteTaskDetails" 
                  :key="task.id"
                  class="task-item"
                >
                  <span class="task-name">{{ task.name }}</span>
                  <span class="task-deadline">{{ $t('assets.myCourses.deadline') }}{{ formatDate(task.deadline) }}</span>
                </div>
              </div>
            </el-popover>
            <span v-else class="task-count incomplete">{{ row.incompleteTasks }}</span>
          </template>
        </el-table-column>

        <!-- 已完成教学任务 -->
        <el-table-column prop="completedTasks" :label="$t('assets.myCourses.completedTasks')" min-width="150" align="center">
          <template #default="{ row }">
            <span class="task-count completed">{{ row.completedTasks }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <div class="pagination-info">
          {{ paginationInfo }}
        </div>
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="totalCourses"
            layout="prev, pager, next, sizes"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { t as $t } from '@/plugins/i18nPlugin'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 接口定义
const TaskDetail = {
  id: '',
  name: '',
  deadline: new Date()
}

const Course = {
  id: '',
  courseName: '',
  teacherName: '',
  incompleteTasks: 0,
  completedTasks: 0,
  incompleteTaskDetails: []
}

// 响应式数据
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)

// 模拟课程数据
const courses = ref([
  {
    id: '1',
    courseName: $t('assets.myCourses.sampleCourseName'),
    teacherName: $t('assets.myCourses.sampleTeacherName'),
    incompleteTasks: 23,
    completedTasks: 23,
    incompleteTaskDetails: [
      { id: '1', name: $t('assets.myCourses.mathHomeworkChapter1'), deadline: new Date('2025-08-05') },
      { id: '2', name: $t('assets.myCourses.mathExercises'), deadline: new Date('2025-08-10') },
      { id: '3', name: $t('assets.myCourses.midtermReview'), deadline: new Date('2025-08-15') }
    ]
  },
  {
    id: '2',
    courseName: $t('assets.myCourses.sampleMathCourseName'),
    teacherName: $t('assets.myCourses.sampleTeacherName'),
    incompleteTasks: 16,
    completedTasks: 16,
    incompleteTaskDetails: [
      { id: '4', name: $t('assets.myCourses.chineseReading'), deadline: new Date('2025-08-08') },
      { id: '5', name: $t('assets.myCourses.essayPractice'), deadline: new Date('2025-08-12') }
    ]
  },
  {
    id: '3',
    courseName: $t('assets.myCourses.sampleCourseName'),
    teacherName: $t('assets.myCourses.sampleTeacherName'),
    incompleteTasks: 23,
    completedTasks: 23,
    incompleteTaskDetails: [
      { id: '6', name: $t('assets.myCourses.englishVocabulary'), deadline: new Date('2025-08-06') },
      { id: '7', name: $t('assets.myCourses.englishGrammar'), deadline: new Date('2025-08-11') },
      { id: '8', name: $t('assets.myCourses.englishListening'), deadline: new Date('2025-08-16') }
    ]
  }
])

// 重复数据以填充表格
for (let i = 4; i <= 15; i++) {
  courses.value.push({
    id: i.toString(),
    courseName: $t('assets.myCourses.sampleCourseName'),
    teacherName: $t('assets.myCourses.sampleTeacherName'),
    incompleteTasks: 23,
    completedTasks: 23,
    incompleteTaskDetails: [
      {
        id: `${i}-1`,
        name: $t('assets.myCourses.courseTask').replace('{number}', i).replace('{taskNumber}', '1'),
        deadline: new Date('2025-08-05')
      },
      {
        id: `${i}-2`,
        name: $t('assets.myCourses.courseTask').replace('{number}', i).replace('{taskNumber}', '2'),
        deadline: new Date('2025-08-10')
      }
    ]
  })
}

// 计算属性
const totalCourses = computed(() => courses.value.length)

const paginatedCourses = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return courses.value.slice(start, end)
})

const paginationInfo = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value + 1
  const end = Math.min(currentPage.value * pageSize.value, totalCourses.value)
  const template = $t('assets.myCourses.pageInfo')
  return template
    .replace('{start}', start)
    .replace('{end}', end)
    .replace('{total}', totalCourses.value)
})

// 方法
const formatDate = (date) => {
  return date.toLocaleDateString('zh-CN')
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

onMounted(() => {
  console.log($t('assets.myCourses.pageLoadComplete'))
})
</script>

<style scoped>
.my-courses {
  padding: 20px;
  background: var(--content-bg-color);
  color: var(--text-color-primary);
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color-primary);
  margin: 0;
}

/* 表格容器 */
.courses-table-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 15px;
}

/* 表格样式 */
.courses-table {
  width: 100%;
  border: none;
}

.courses-table :deep(.el-table__header) {
  background-color: #fafafa;
}

.courses-table :deep(.el-table th) {
  background-color: #fafafa !important;
  color: #606266 !important;
  font-weight: 500 !important;
  border-bottom: 1px solid #ebeef5 !important;
  padding: 12px 0 !important;
  text-align: left !important;
}

.courses-table :deep(.el-table td) {
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 12px 0 !important;
}

.courses-table :deep(.el-table tr:hover > td) {
  background-color: #f5f7fa !important;
}

/* 课程名称 */
.course-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

/* 老师名称 */
.teacher-name {
  font-size: 14px;
  color: #606266;
}

/* 任务数量 */
.task-count {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.task-count.incomplete {
  color: #409eff;
}

.task-count.completed {
  color: #67c23a;
}

/* 任务详情弹窗 */
.task-details {
  padding: 8px 0;
}

.task-details-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color-primary);
  margin-bottom: 8px;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color-tertiary);
}

.task-item:last-child {
  border-bottom: none;
}

.task-name {
  font-size: 13px;
  color: var(--text-color-secondary);
  flex: 1;
}

.task-deadline {
  font-size: 12px;
  color: var(--text-color-tertiary);
  margin-left: 12px;
}

/* 分页器 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 0;
  background: var(--card-bg-color);
  gap: 16px;
}

.pagination-info {
  font-size: 14px;
  color: var(--text-color-secondary);
}

.pagination :deep(.el-pagination__sizes) {
  margin-right: 16px;
}

.pagination :deep(.el-select .el-input) {
  width: 100px;
}

.pagination :deep(.el-pagination__total) {
  margin-right: 16px;
  color: var(--text-color-secondary);
}

.pagination :deep(.btn-prev),
.pagination :deep(.btn-next) {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color-primary);
  color: var(--text-color-primary);
  border-radius: 4px;
  width: 32px;
  height: 32px;
}

.pagination :deep(.btn-prev:hover),
.pagination :deep(.btn-next:hover) {
  color: var(--button-primary-bg-color);
  background: var(--sidebar-hover-bg-color);
  border-color: var(--border-color-secondary);
}

.pagination :deep(.el-pager li) {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color-primary);
  color: var(--text-color-primary);
  margin: 0 2px;
  border-radius: 4px;
  min-width: 32px;
  height: 32px;
  line-height: 30px;
}

.pagination :deep(.el-pager li:hover) {
  color: var(--button-primary-bg-color);
  background: var(--sidebar-hover-bg-color);
  border-color: var(--border-color-secondary);
}

.pagination :deep(.el-pager li.active) {
  background: #fff;
  border: 2px solid #409eff;
  color: #409eff;
  border-radius: 4px;
  line-height: 28px;
}
</style>
